<script setup lang="ts">
import userSearch from './c-cpns/user-search.vue'
import userContent from './c-cpns/user-content.vue'
import userModel from './c-cpns/user-model.vue'
import { ref } from 'vue'
const userDataShowRef = ref<InstanceType<typeof userContent>>()
const newUserModelRef = ref<InstanceType<typeof userModel>>()
function resetClick() {
  userDataShowRef.value?.fetchPageData()
}
function searchClick(formData: any) {
  userDataShowRef.value?.fetchPageData(formData)
}
function userNewModelShow() {
  newUserModelRef.value?.changeDialogVisible()
}
function userEditModalShow(itemData: any) {
  newUserModelRef.value?.changeDialogVisible(false, itemData)
}
</script>
<template>
  <div class="user">
    <div class="main-top">
      <userSearch
        @resetClick="resetClick"
        @searchClick="searchClick"
      ></userSearch>
    </div>
    <div class="main-content">
      <userContent
        ref="userDataShowRef"
        @userNewModelShow="userNewModelShow"
        @userEditModalShow="userEditModalShow"
      ></userContent>
    </div>
    <userModel ref="newUserModelRef"></userModel>
  </div>
</template>

<style scoped lang="less">
.user {
  .main-top {
  }
  .main-content {
  }
}
</style>
